<template>
  <div class="centerTop">
<!--    提示图标-->
    <img :src="imgurl" id="ctRemark" @mouseenter="onMouseOver" @mouseleave="onMouseOut">
<!--    提示内容-->
    <div v-show="seen" id="cont" style="position: fixed;z-index: 9999999;">
      <div style="margin-top: 0.2rem;margin-left: 0.2rem;margin-right: 0.2rem">
        <li>质量指数=需求完成度*0.1+需求符合度*0.15+用例通过率*0.15+用例执行率*0.1+Bug修复率*0.2+缺陷趋势*0.1+关键性能通过率*0.2-（major以上20天天未解决的bug数+reopen数+renew bug数）*0.01-风险系数*0.1</li>
        <li>需求完成度由开发提测时提供0-1；</li>
        <li>需求符合度由PTM依据判断0-1；</li>
        <li>用例通过率=手工用例通过率*0.8+自动化用例通过率*0.2，若无自动化用例，用例通过率=手工用例通过率；</li>
        <li>用例执行率=手工用例执行率*0.8+自动化用例执行率*0.2，若无自动化用例，用例执行率=手工用例执行率；</li>
        <li>Bug修复率=已关闭Bug/总Bug；</li>
        <li>缺陷趋势=arctan(-（当前版本总bug-当前版本解决bug-（上版本bug总数-上版本bug解决数））/10）*2/Π</li>
        <li>关键性能通过率=关键性能用例Pass数/关键性能用例数；</li>
        <li>风险系数=高风险*1+中风险*0.5+低风险*0.25</li>
      </div>
    </div>
<!--    当前版本信息-->
    <version style="position: fixed;z-index: 999999;"/>
<!--    质量指数曲线-->
    <quality :cdata="cdata" style="height: 7.1rem;width: 11.6rem"/>
  </div>
</template>

<script>
import quality from '@/components/quality'
import version from '@/components/version'
// 提示图标
import img from '../assets/remark.png'

let qualityTrends = {}

export default {
  data() {
    return {
      // 用于提示图标
      imgurl:img,
      seen:false,
      // 传递给quality参数
      cdata: {
        // X轴
        category: null,
        // Y轴柱状图
        barData: 0,
        // Y轴曲线图
        rateData: null,
        // 用于图表提示
        alldata:null,
        alldatapre:null,
      }
    };
  },
  // 组件
  components: {
    quality,
    version,
  },
  // mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作
  mounted() {
    this.getdata();
    this.setData();

  },
  methods: {
    // 曲线数据，Y轴曲线图
    setData() {
      for (let i = 0; i < this.cdata.barData.length - 1; i++) {
        let rate = this.cdata.barData[i] / this.cdata.lineData[i];
        this.cdata.rateData.push(rate.toFixed(2));
      }
      // console.log(this.cdata.rateData)
    },
    // X轴数据
    getVersions() {
      var versions = []
      // console.log(qualityTrends)
      for (var v in qualityTrends) {
        versions.push(qualityTrends[v].submitTime)
      }
      // console.log(versions)
      this.cdata.category = versions
    },
    // Y轴柱状图数据
    getQuality() {
      var qualities = []
      // var quality = []
      for (var v in qualityTrends) {
        var quality = []
        quality.push(qualityTrends[v].submitTime)
        quality.push(qualityTrends[v].qualitty)
        qualities.push(quality)
      }
      // console.log(qualities)
      this.cdata.barData = qualities
      // this.cdata.rateData = qualities
    },
    // 曲线数据，Y轴曲线图
    getBugTrend(){
      var bugTrend = []
      for (var v in qualityTrends) {
        var quality = []
        quality.push(qualityTrends[v].submitTime)
        quality.push(qualityTrends[v].qualitty)
        bugTrend.push(quality)
      }
      this.cdata.rateData = bugTrend
    },
    // 请求质量指数数据，并赋给cdata
    getdata(){
      this.$http({ method: 'get',
        url: 'show/quality/?system='+this.$route.query.project,}).then(response => {
            // console.log(response.data);
            qualityTrends = response.data
            this.getVersions()
            this.getQuality()
            this.getBugTrend()
        var all = []
        var allpre = []
        for(var key in response.data) {
          // if(key!="submitTime"){
          var re = []
          re.push(response.data[key]["submitTime"])
          re.push(response.data[key])
          all.push(re)
        }
        // }
        for(var ind in all){
          if(ind==0) allpre.push([all[0][0],0]);
          else{
            allpre.push([all[ind][0],all[ind-1][1]])
          }
        }
        // console.log(all)
        // console.log(allpre)
        this.cdata.alldata =all
        this.cdata.alldatapre =allpre
          },
      );
    },
    // 鼠标经过时操作
    onMouseOver() {
      this.seen=true
    },
    // 鼠标离开时操作
    onMouseOut() {
      this.seen=false
    },
  }
}
</script>

<style lang="scss" scoped>
#ctRemark{
  //float: right;
  position: fixed;
  z-index: 99999999;
  //padding-top: 1rem;
  margin-left: 11.2rem;
  width: 0.3rem;
  height: 0.3rem;
}
#cont{
  width: 8rem;
  height: 5rem;
  //background-color:#171823;
  margin-top: 0.5rem;
  margin-left: 3rem;
  color:#CCFFFF;
  //box-shadow: #5f5f5f;
  background: rgba(64,64,64,.5);
  li{ line-height:0.35rem}
  //小蓝点
  li:before {
    content: "";
    width: 0.1rem;
    height: 0.1rem;
    display: inline-block;
    border-radius: 50%;
    background: #4F8EFF;
    vertical-align: middle;
    margin-right: 0.1rem;
  }
}
</style>